import { Layout, Playground, Attributes } from 'lib/components'
import { Tabs, Spacer, Link, Text, Button, Code, useTabs } from 'components'
import { useState } from 'react'
import TwitterIcon from '@geist-ui/react-icons/twitter'
import TwitchIcon from '@geist-ui/react-icons/twitch'

export const meta = {
  title: 'Tabs',
  group: 'Navigation',
}

## Tabs

Display tab content.

<Playground
  scope={{ Tabs }}
  desc="Toggle display of different templates."
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
  <Tabs.Item label="proxies" value="2">Between the Web browser and the server, numerous computers and machines relay the HTTP messages.</Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="Disabled"
  scope={{ Tabs }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
  <Tabs.Item label="jumped" value="2" disabled />
</Tabs>
`}
/>

<Playground
  title="Hide Divider"
  scope={{ Tabs, Text }}
  code={`
<Tabs initialValue="html" hideDivider>
  <Tabs.Item label="HTML" value="html">
    <Text mt={0}>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</Text>
  </Tabs.Item>
  <Tabs.Item label="CSS" value="css">
    <Text mt={0}>CSS is the language that we can use to style and lay out our web content,
    as well as adding behavior like animation.</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="With Icon"
  desc="Show icon component on label button."
  scope={{ Tabs, TwitchIcon, TwitterIcon, Link, Text }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
    <Text mt={0}>Hello, this is our live broadcast on Twitch.</Text>
    <Link href="https://github.com/geist-org/react" color rel="nofollow" target="_blank">Click here to visit GitHub repo.</Link>
  </Tabs.Item>
  <Tabs.Item label={<><TwitterIcon/> Twitter </>} value="2">
    <Text mt={0}>The Components of React looks very cool.</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="Scroll Behavior"
  desc="If all tabs cannot fit in the width then then hidden tabs can be accessed through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)"
  scope={{ Tabs, TwitchIcon, TwitterIcon, Link, Text }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="Home" value="1">
    <Text>Hello!</Text>
  </Tabs.Item>
  <Tabs.Item label="About" value="2">
    <Text>Cool stuff.</Text>
  </Tabs.Item>
  <Tabs.Item label="About Us" value="3">
    <Text>Good people.</Text>
  </Tabs.Item>
  <Tabs.Item label="Features" value="4">
    <Text>Amazing.</Text>
  </Tabs.Item>
  <Tabs.Item label="Pricing" value="5">
    <Text>Very low.</Text>
  </Tabs.Item>
  <Tabs.Item label="Docs" value="6">
    <Text>Clear.</Text>
  </Tabs.Item>
  <Tabs.Item label="Profile" value="7">
    <Text>Extraordinary person.</Text>
  </Tabs.Item>
  <Tabs.Item label="Settings" value="8">
    <Text>Easy to tweak.</Text>
  </Tabs.Item>
  <Tabs.Item label="Dashboard" value="9">
    <Text>Charts.</Text>
  </Tabs.Item>
  <Tabs.Item label="Policies" value="10">
    <Text>Privacy focused.</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="Imperatively"
  desc="Control components with imperatively style."
  scope={{ Tabs, Button, Spacer, Code, Text, useState }}
  code={`
() => {
  const [value, setValue] = useState('1')
  const switchHandler = () => setValue('2')
  const changeHandler = val => setValue(val)
  return (
    <>
      <Button scale={1/3} onClick={switchHandler}><Text>Select  <Code>Jumped</Code></Text></Button>
      <Spacer h={.5} />
      <Tabs value={value} onChange={changeHandler}>
        <Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
        <Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>
      </Tabs>
    </>
  )
}
`}
/>

<Playground
  title={
    <>
      with <Code>useTabs</Code>
    </>
  }
  desc="Control components with `hooks`."
  scope={{ Tabs, Button, Spacer, Code, Text, useTabs }}
  code={`
() => {
  const { setState, bindings } = useTabs('1')
  return (
    <>
      <Button scale={1/3} onClick={() => setState('2')}>
        <Text>Select  <Code>Jumped</Code></Text>
      </Button>
      <Spacer h={.5} />
      <Tabs {...bindings}>
        <Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
        <Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>
      </Tabs>
    </>
  )
}
`}
/>

<Attributes edit="/pages/en-us/components/tabs.mdx">
<Attributes.Title>Tabs.Props</Attributes.Title>

| Attribute        | Description            | Type                    | Accepted values                 | Default |
| ---------------- | ---------------------- | ----------------------- | ------------------------------- | ------- |
| **initialValue** | initial value          | `string`                | -                               | -       |
| **value**        | current selected value | `string`                | -                               | -       |
| **hideDivider**  | hide default divider   | `boolean`               | -                               | `false` |
| **onChange**     | change event           | `(val: string) => void` | -                               | -       |
| ...              | native props           | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |

<Attributes.Title alias="Tabs.Tab">Tabs.Item.Props</Attributes.Title>

| Attribute           | Description         | Type      | Accepted values | Default |
| ------------------- | ------------------- | --------- | --------------- | ------- |
| **label**(required) | display tab's label | `string`  | -               | -       |
| **value**(required) | unique ident value  | `string`  | -               | -       |
| **disabled**        | disable current tab | `boolean` | -               | `false` |

<Attributes.Title>useTabs</Attributes.Title>

```ts
type useTabs = (initialValue: string) => {
  state: string
  setState: Dispatch<SetStateAction<string>>
  currentRef: MutableRefObject<string>
  bindings: {
    value: string
    onChange: (val: string) => void
  }
}
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
